<style>

    div[lay-id='cabinetInventoryInoutTable']{
        display: none;
    }
    .cabinet-inventory-list{
        display: inline-flex;
        width: 100%;
        flex-wrap: wrap;
    }
    .cabinet-inventory-list .list-cell{
        width: 25%;
        padding: 8px;
        box-sizing: border-box;
    }
    .cabinet-inventory-list .list-cell .list-item{
        border-radius: 5px;
        border: 1px solid #ECECEC;
    }
    .cabinet-inventory-list .list-cell .list-top{
        height: 40px;
        padding: 0 15px;
        background: rgba(0,156,94,0.06);
        border-radius: 5px 5px 0 0;
    }
    .cabinet-inventory-list .list-cell .list-top .sku-name{
        font-weight: 600;
    }
    .cabinet-inventory-list .list-cell .list-top .space{
        flex-shrink: 0;
        padding-left: 10px;
    }
    .cabinet-inventory-list .list-ct{
        display: flex;
        padding: 15px 15px 5px;
    }
    .cabinet-inventory-list .list-ct .list-icon{
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }
    .cabinet-inventory-list .list-ct .list-icon img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    .cabinet-inventory-list .list-ct .list-txt{
        padding-left: 14px;
        flex: 1;
    }
    .cabinet-inventory-list .list-ct .list-txt .sku-code{
        font-weight: 600;
        line-height: 18px;
        margin-bottom: 2px;
    }
    .cabinet-inventory-list .list-ct .list-txt .label{
        padding-top: 2px;
        line-height: 18px;
    }
    .cabinet-inventory-list .list-btm{
        padding: 0 15px;
    }
    .cabinet-inventory-list .list-btm .nape-cell {
        line-height: 18px;
        padding-top: 10px;
    }
    .cabinet-inventory-list .list-btn{
        padding: 15px 8px;
    }
    .cabinet-inventory-list .list-btn .btn-cell{
        padding: 0 7px;
        flex: 1;
    }
    .cabinet-inventory-list .list-btn .btn-cell .layui-btn{
        width: 100%;
        height: 40px;
        line-height: 40px;
    }
    .cabinet-inventory-list .list-btn .btn-cell .layui-btn.details{
        background-color: #FFFFFF !important;
        color: #333;
        border: 1px solid #009C5E;
    }
    .cabinet-inventory-list .row-between{
        justify-content: space-between;
    }
    .cabinet-inventory-list .flex-ct{
        display: flex;
        align-items: center;
    }
    .cabinet-inventory-list .label{
        color: #999;
    }
    .cabinet-inventory-list .line-1{
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        /*! autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
    }
</style>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt" style="width: 56%;">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">柜子：</label>
                                    <div class="layui-input-inline">
                                        <select  name="cabCode" lay-filter="cabCode"  lay-search lay-verify="" class="common-select-search">
                                            <option value="">请选柜子</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">物料编号：</label>
                                    <div class="layui-input-inline">
                                        <input name="skuCode" class="layui-input" type="text" placeholder="请输入物料编号" autocomplete="off"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">规格码：</label>
                                    <div class="layui-input-inline">
                                        <input name="oldSpecCode" class="layui-input" type="text" placeholder="请输入规格码" autocomplete="off"/>
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <div class="viewNav" id="viewNav">
                                        <div class="viewNavGraphics active"><img src="assets/images/navgraphics1.png">图文</div>
                                        <div class="viewNavList"><img src="assets/images/navlist.png">列表</div>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog" lay-submit layui-form-keyDownSearch="true">查询</button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置</button>
                                    <button id="cellInventoryCabinetExport" class="layui-btn icon-btn"><i class="layui-icon">&#xe67d;</i>导出</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <table class="layui-table" id="cabinetInventoryInoutTable" lay-filter="cabinetInventoryInoutTable"></table>
            <div class="viewNavMain" id="viewNavMain">
                <div class="viewNavBox" style="">
                    <div class="cabinet-inventory-list" id="viewNavBox"></div>
                    <div class="list-none-data" style="display: none">
                        <img src="assets/images/none-data.png" alt="">
                        <p>暂无数据</p>
                    </div>
                </div>
                <div id="viewNavPage" style="text-align: right;"></div>
            </div>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="storageInventoryInoutTableBar">
    <a class="layui-btn layui-btn-xs" lay-event="storageInventoryBtn">库存分布</a>
</script>

<!--图文模板-->
<script type="text/html" id="cabinetProductImgTemplate">
    {{# layui.each(d, function(index, item){ }}
    <div class="list-cell">
        <div class="list-item">
            <div class="list-top flex-ct">
                <div class="sku-name line-1">主柜编号：{{item.belongCabinet}}</div>
            </div>
            <div class="list-ct">
                <div class="list-icon">
                    <img src="{{item.skuPic || 'assets/images/default-icon.png'}}" alt="">
                </div>
                <div class="list-txt">
                    <div class="sku-code line-1">{{item.skuName}}</div>
                    <div class="label line-1">编码：{{item.skuCode}}</div>
                    <div class="label line-1">规格：{{item.skuSpecOld}}</div>
                    <div class="label">品牌：{{item.productBrandName}}</div>
                </div>
            </div>
            <div class="list-btm">
                <div class="nape-cell flex-ct row-between">
                    <div class="nape-item"><label class="label">领新柜编码：</label><span>{{item.cabCode}}</span></div>
                </div>
                <div class="nape-cell flex-ct row-between">
                    <div class="nape-item"><label class="label">领新柜名称：</label><span>{{item.cabName}}</span></div>
                    <div class="nape-item"><label class="label">包装规格：</label><span>{{item.packName}}</span></div>
                </div>
                <div class="nape-cell flex-ct row-between">
                    <div class="nape-item"><label class="label">库存(基础单位计)：</label><span>{{item.quantityPack}}{{item.basicsUnitName}}</span></div>
                    <div class="nape-item"><label class="label">库存(包装计)：</label><span>{{item.quantity}}{{item.unitName}}</span></div>
                </div>
            </div>
            <div class="list-btn flex-ct">
                <div class="btn-cell">
                    <button class="layui-btn inventorySpace" data-code="{{item.skuCode}}" data-cab="{{item.belongCabinet}}">库存分布</button>
                </div>
            </div>
        </div>
    </div>
    {{# }); }}
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="storageInventoryInoutForm">
    <div class="layui-fluid">
        <table class="layui-table" id="inventoryProductTable" lay-filter="inventoryProductTable"></table>
    </div>
</script>

<script type="text/html" id="inventorySpecForm">
    <div class="layui-fluid">
        <table class="layui-table" id="inventorySpecTable" lay-filter="inventorySpecTable"></table>
    </div>
</script>

<script type="text/html" id="inventoryProductTableBar">
    <a class="layui-btn layui-btn-xs" lay-event="inventorySpecBtn">库存分布</a>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin','laypage', 'laytpl'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;
        var laytpl = layui.laytpl;
        let laypage = layui.laypage;
        let cabinetProductList = [];
        let viewNavPageCount = 0, listText = 1; //viewNavPageCount(图文状态下的页码)  listText(区分图文视图1 和 列表视图0)

        admin.selectSearch();

        // 渲染表格
        var insTb = table.render({
            elem: '#cabinetInventoryInoutTable',
            url: config.base + 'enterprisecab/cabinet/admin/cellInventoryCabinet/list',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers', title: '序号', fixed: 'left'}
                ,{field: 'skuName', sort: false, title: '物料名称', fixed: 'left', width: 160}
                ,{field: 'skuCode', sort: false, title: '物料编号', fixed: 'left', width: 160}
                ,{field: 'skuSpecOld', sort: false, title: '规格码', fixed: 'left', width: 160}
                ,{field: 'productBrandName', sort: false, title: '品牌'}
                ,{field: 'belongCabinet', sort: false, title: '主柜编码', width: 180}
                ,{field: 'cabName', sort: false, title: '领新柜名称', width: 130}
                ,{field: 'cabCode', sort: false, title: '领新柜编码', width: 130}
                ,{field: 'quantity', title: '库存(包装计)', width: 120}
                ,{field: 'unitName', title: '包装单位'}
                ,{field: 'packName', title: '包装规格'}
               /* ,{field: 'quantityPack', sort: true, title: '库存(基础单位计)', width: 150, templet: (d)=> {
                        return d.quantityPack + d.basicsUnitName
                    }}*/
                ,{field: 'quantityPack', sort: true, title: '库存(基础单位计)', width: 150 }
                ,{field: 'basicsUnitName', sort: true, title: '基础单位', templet: d=> d.basicsUnitName ? d.basicsUnitName : '无'}
                ,{align: 'center', toolbar: '#storageInventoryInoutTableBar', fixed: 'right', title: '操作', width: 100}
            ]],
            done: function (res, curr, count) {
            }
        });

        // 工具条点击事件
        table.on('tool(cabinetInventoryInoutTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'storageInventoryBtn') { //修改
                showStorageInventoryModel(data);
            }
        });

        //监听排序
        table.on('sort(cabinetInventoryInoutTable)', function(obj){
            table.reload('cabinetInventoryInoutTable', {
                initSort: obj
                ,where: {
                    sort: obj.field
                    ,order: obj.type
                }
            });
            $('[lay-id="cabinetInventoryInoutTable"]').show();
        });
        $('#viewNav .viewNavGraphics ').click(function () {
            listText = 1;
            $(this).addClass('active').siblings().removeClass('active');
            $(this).find('img').attr('src', 'assets/images/navgraphics1.png');
            $(this).siblings('div').eq(0).find('img').attr('src', 'assets/images/navlist.png');
            $('[lay-id="cabinetInventoryInoutTable"]').hide();
            $('#viewNavMain').show();
        });

        $('#viewNav .viewNavList ').click(function () {
            listText = 0;
            $('[lay-id="cabinetInventoryInoutTable"]').show();
            // 显示表格需重绘表格尺寸
            table.resize("cabinetInventoryInoutTable");
            $('#viewNavMain').hide();
            $(this).addClass('active').siblings().removeClass('active');
            $(this).find('img').attr('src', 'assets/images/navlist1.png');
            $(this).siblings('div').eq(0).find('img').attr('src', 'assets/images/navgraphics.png');
        });

        function viewNavBox(data) {
            layer.load(2);
            if (!data || data.length <= 0) {
                $('#viewNavBox').html('');
                $('#viewNavPage').hide();
                $('.list-none-data').show();
            }else {
                $('.list-none-data').hide();
                laytpl(cabinetProductImgTemplate.innerHTML).render(data, function (html) {
                    $('#viewNavBox').html(html);
                });
                $('#viewNavPage').show();
            }
            layer.closeAll();
        }

        $('#viewNavBox').delegate('.inventorySpace', 'click', function () {
            let code = $(this).attr('data-code') + $(this).attr('data-cab');
            let filterList = cabinetProductList.filter(item => {
                let flag = item.skuCode + item.belongCabinet
                return code == flag
            })
            showStorageInventoryModel(filterList[0])
        });

        admin.reqSync('enterprisecab/cabinet/admin/cellInventoryCabinet/list', {page: 1, limit: 12}, res => {
            if (res.code === 200) {
                viewNavPageCount = res.count;
                cabinetProductList = res.data;
                viewNavBox(res.data);
                viewNavPageFn()
            }
        }, 'get');

        function viewNavPageFn(_condition) {
            laypage.render({
                elem: 'viewNavPage' //注意，这里的 test1 是 ID，不用加 # 号
                , count: viewNavPageCount //数据总数，从服务端得到
                , limit: 12
                , jump: function (obj, first) {
                    if (!first) {
                        let condition = _condition ? $.extend(_condition, {
                            page: obj.curr,
                            limit: obj.limit
                        }) : {page: obj.curr, limit: obj.limit};
                        admin.req('enterprisecab/cabinet/admin/cellInventoryCabinet/list', condition, res => {
                            if (res.code === 200) {
                                cabinetProductList = res.data;
                                viewNavBox(res.data);
                            }
                        }, 'get');
                    }
                }
            });
        }

        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            if (listText == 0) {
                insTb.reload({where: data.field,page: {curr: 1}},'data');
                $('[lay-id="cabinetInventoryInoutTable"]').show();
            } else {
                admin.reqSync('enterprisecab/cabinet/admin/cellInventoryCabinet/list', $.extend(data.field, {
                    page: 1,
                    limit: 12
                }), res => {
                    if (res.code === 200) {
                        viewNavPageCount = res.count;
                        cabinetProductList = res.data;
                        viewNavBox(res.data);
                        viewNavPageFn(data.field)
                    }
                }, 'get');
            }
        });

        // 重置搜索
        form.on('submit(resets)', function (data) {
            $(".lay-header").find('select').val("");
            $(".lay-header").find('input').val("");
            var field = data.field;
            for(let key in field){
                field[key] = ''
            }
            if (listText == 0) {
                insTb.reload({where: field,page: {curr: 1}},'data');
                $('[lay-id="cabinetInventoryInoutTable"]').show();
            }else {
                admin.reqSync('enterprisecab/cabinet/admin/cellInventoryCabinet/list', {page: 1,limit: 12}, res => {
                    if (res.code === 200) {
                        viewNavPageCount = res.count;
                        cabinetProductList = res.data;
                        viewNavBox(res.data);
                        viewNavPageFn(field)
                    }
                }, 'get');
            }
        });

        admin.req('enterprisecab/cabinet/admin/cabinet/list', {limit:999,cabinetNature:'sale',cabinetType:'spring'}, function (res) {
            if (200 == res.code) {
                var optionHtml='<option value=""> 请选择柜子</option>';
                for(var k=0;k<res.data.length;k++){
                    optionHtml+='<option value="'+res.data[k].code+'">'+res.data[k].code+'</option>';
                }
                $("select[name='cabCode']").html(optionHtml);
                form.render('select')
            } else {
                layer.msg(res.msg, {icon: 2, time: 1000});
            }
        }, 'GET');

        form.render('select');

        // 显示库存分布弹窗
        function showStorageInventoryModel(data) {
            admin.open({
                type: 1,
                area: '1200px',
                offset: '65px',
                title: '库存分布',
                content: $('#storageInventoryInoutForm').html(),
                success: function () {
                    getInventoryProduct(data);
                }
            });
        }

        function getInventoryProduct(data){
            var inventoryProductTb = table.render({
                elem: '#inventoryProductTable',
                url: config.base + 'enterprisecab/cabinet/admin/cellInventoryCabinet/getListInventoryBySkuCode?skuCode='+data.skuCode+'&belongCabinet='+data.belongCabinet,
                page: false,
                cellMinWidth: 100,
                cols: [[
                    {type: 'numbers', title: '序号'}
                    ,{field: 'cabCode', sort: false, title: '柜子编号'}
                    ,{field: 'cabName', title: '企业自定义名称'}
                    ,{field: 'productName', sort: false, title: '物料名称'}
                    ,{field: 'skuCode', sort: false, title: '物料编号'}
                    ,{field: 'skuSpecOld', sort: false, title: '规格码'}
                    ,{field: 'productBrandName', sort: false, title: '品牌'}
                    ,{field: 'quantityPack', sort: true, title: '库存(基础单位计)', width: 150, templet: (d)=> {
                            return d.quantityPack + d.basicsUnitName
                        }}
                    , {align: 'center', toolbar: '#inventoryProductTableBar', title: '操作', width: 200}
                ]]
            });
        }

        // 工具条点击事件
        table.on('tool(inventoryProductTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'inventorySpecBtn') { //修改
                showInventorySpecModel(data);
            }
        });

        function showInventorySpecModel(data){
            admin.open({
                type: 1,
                area: '1280px',
                offset: '85px',
                title: '库存分布',
                content: $('#inventorySpecForm').html(),
                success: function () {
                    getInventorySpec(data);
                }
            });
        }

        function getInventorySpec(data){
            var inventoryProductTb = table.render({
                elem: '#inventorySpecTable',
                url: config.base + 'enterprisecab/cabinet/admin/cellInventorySpace/list?cabCode='+data.cabCode+'&skuCode='+data.skuCode,
                page: true,
                cellMinWidth: 100,
                cols: [[
                    {type: 'numbers', title: '序号'}
                    ,{field: 'spaceCode', sort: false, title: '货道编号'}
                    ,{field: 'cabCode', sort: false, title: '柜子编号'}
                    ,{field: 'cabName', title: '企业自定义名称', width: 130}
                    ,{field: 'skuName', sort: false, title: '物料名称'}
                    ,{field: 'skuCode', sort: false, title: '物料编号'}
                    ,{field: 'skuSpecOld', sort: false, title: '规格码'}
                    ,{field: 'productBrandName', sort: false, title: '品牌'}
                    ,{field: 'quantity', sort: false, title: '库存(包装计)', width: 120}
                    ,{field: 'unitName', sort: false, title: '包装单位'}
                    ,{field: 'packName', sort: false, title: '包装规格'}
                    ,{field: 'quantityPack', sort: true, title: '库存(基础单位计)', width: 150, templet: (d)=> {
                            return d.quantityPack + d.basicsUnitName
                        }}
                ]],
            });
        }


        // 导出
        $('#cellInventoryCabinetExport').click(function () {
            location.href = config.base + 'enterprisecab/cabinet/admin/cellInventoryCabinet/export';
        });

    });
</script>